<template>
	<div class="card">
		<p>基于 vue-esign 做了简单封装</p>
		<Esign ref="esignRef" :style="{ border: '1px solid #333', marginBottom: '20px' }" />
		<el-button @click="handleReset">清空画板</el-button>
		<el-button @click="handleGenerate">生成图片</el-button>
		<div>
			<img :src="img" />
		</div>
	</div>
</template>

<script lang="ts" setup name="ComponentExampleEsign">
import Esign from '@/components/Esign/index.vue'
import { ref } from 'vue'
const esignRef = ref()

const img = ref()
function handleReset() {
	esignRef.value.reset()
}
function handleGenerate() {
	esignRef.value
		.generate()
		.then((res: any) => {
			img.value = res
			console.log(res)
		})
		.catch((err: any) => {
			// 画布没有签字时会执行这里 'Not Signned'
			alert(err)
		})
}
</script>

<style lang="scss" scoped></style>
